<template>
  <div>
    <div class="emotion-box" :style="{height: height + 'px' }" id = "emotion-box-id" >
      <div class="emotion-box-line" v-for="(line, i) in list" :key="i" >
        <emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)" >{{item}}</emotion>
      </div>
    </div>
  </div>
</template>

<script>
import Emotion from './Emotion'
export default {
  props: {
    height: {
      type: Number,
      default: 200,
    }
  },
  data () {
    return {
      list: [
        /*  'girl19','girl20','girl21','girl22','girl23','girl24','girl25','girl26', 'girl27',
  'girl28','girl29','girl30','girl31','girl32','girl33','girl34','girl35', 'girl36',
  'girl37','girl38','girl39']*/
        ['牛', '耶', '666', '火箭', '发呆', '得意', '流泪', '害羞', '闭嘴'],
        ['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过',  '酷'],
        [ '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂',  '疑问', '嘘', '晕'],
        ['折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了'],
        ['坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈',  '快哭了', '阴险', '亲亲'],
        ['吓', '可怜', '菜刀', '干杯','猪头','鲜花','凋谢','飞吻','爱心'],
        ['蛋糕','闪电','炸弹','崇拜',  '握拳','OK','开心','发抖','欢快'],
        [ '欢迎','回头','奋斗','礼物', 'dog1','dog2','dog3','dog4'  ,'dog5',],
        ['dog6','dancer1','dancer2','dancer3','dancer4','dancer5','dancer6','girl1','girl2'],
        ['girl3','girl4','girl5','girl6'  ,'girl7','girl8','girl9','girl10','girl1'],
        ['girl12','girl13','girl14','girl15','girl16','girl17','girl18','girl19','girl20'],
        ['girl21','girl22','girl23','girl24', 'girl25','girl26','meicai5','meicai6', 'meicai7','meicai8' ],
        [ 'meicai9','meicai10','meicai11', 'meicai12','meicai13','meicai14','meicai15', 'meicai16','meicai17' ],
        ['meicai18','meicai19','meicai20', 'meicai21','meicai22','meicai23','meicai24', 'meicai25','meicai26'],
        ['meicai27','meicai28', 'meicai29', 'meicai30'],
      ]
    }
  },
  methods: {
    clickHandler (i) {
      let emotion = `#${i};`
      this.$emit('emotion', emotion)
    }
  },
  components: {
    Emotion
  }
}
</script>
<style scoped>
  .emotion-box {
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #b4b4b4;
    position: absolute;
    bottom: 21px;
    width: 82.5%;
    overflow-y: scroll;
    background: white;

  }
  .emotion-box-line {
    display: flex;
  }
  .emotion-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
  }
</style>
